<template>
  <div class="videos-wrap" id="videos-wrap">
    <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
        @ready="onPlayerReady"
    ></video-player>
    <!--    <div class="progress-bar">-->
    <!--      <div class="progress" :style="{ width: progressWidth }"></div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import {videoPlayer} from "vue-video-player";
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
import store from '../../store'

export default {
  name: "videos",
  props: ["videoList", "index"],
  mounted() {
  },
  watch: {
    videoList: {
      handler(newVal, oldVal) {
        // this.$store.commit("share/UPDATE_VIDES_LIST", this.id);
        this.playerOptions.sources = [
          {
            src: `${store.state.imgUrl}${newVal.mediaContent}`, // 路径
            type: "video/mp4", // 类型
          },
        ];
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      store: store,
      progressWidth: "0%",
      playerOptions: {
        // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto",
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [],
        // aspectRatio: '16:10',
        
        // sources: [
        //   {
        //     src: `http://debug.yasee.com.cn${this.videoList.mediaContent}`, // 路径
        //     type: "video/mp4", // 类型
        //   },
        // ],
        //poster: "../../static/images/test.jpg", //你的封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: false,
      },
      playing: true, // 播放状态
    };
  },
  components: {
    videoPlayer,
  },
  created() {
    this.autoPlayAction();
  },
  methods: {
    onPlayerReady(player) {
      player.on("timeupdate", this.updateProgressBar);
      player.on("seeked", this.updateProgressBar);
    },
    updateProgressBar() {
      const player = this.$refs.videoPlayer.player;
      const currentTime = player.currentTime();
      const duration = player.duration();
      const percentage = (currentTime / duration) * 100;
      this.progressWidth = `${percentage}%`;
      // this.switchVideo()
    },
    // 视频分段加载
    switchVideo(){
      const player = this.$refs.videoPlayer.player;
      const startTime  = [0,10,20]
      let currentTime = player.currentTime();
      const endTime = [10,20,player.duration()]

      for (let i = 0; i < startTime.length; i++) {
        if (currentTime >= startTime[i] && currentTime < endTime) {
          currentTime = endTime[i]
          break
        }
        
      }
    },
    //     onPlayerReady(player) {
    // // 在播放器准备就绪后，可以自定义样式
    //       const progress = player.controlBar.progressControl
    //       // 添加自定义样式类
    //       progress.addClass('custom-progress')
    //       // 可以进一步自定义样式，例如设置底部固定位置
    //       progress.el().style.position = 'fixed'
    //       progress.el().style.bottom = '-42%'
    //       progress.el().style.width = '100%'
    //     },
    // 点击播放或暂停视频
    playOrStop() {
      if (this.playing) {
        this.$refs.videoPlayer.player.pause();
        this.playing = false;
      } else {
        this.$refs.videoPlayer.player.play();
        this.playing = true;
      }
    },
    // 自动播放第一个视频
    autoPlayAction() {
      if (this.index === 0) {
        this.playerOptions.autoplay = true;
      }
    },

    play() {
      this.$refs.videoPlayer.player.load();
      this.$refs.videoPlayer.player.play();
      this.playing = true;
    },

    stop() {
      this.$refs.videoPlayer.player.pause();
      this.playing = false;
    },
  },
};
</script>

<style>
.progress-bar {
  /*z-index:2001;*/
  width: 100%;
  height: 5px;
  position: fixed;
  bottom: 5%;
  background-color: #f0f0f0;
}

.progress {
  z-index: 2003;
  height: 100%;
  background-color: #ff0000;
}
</style>
<style lang="less" scoped>
.custom-progress {
  //background-color: red;
  /* 自定义样式 */
}

.video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0;
}

.video-js .vjs-slider {
  margin: 0;
}
</style>
